<template>
  <el-container>
    <!-- 页面标题 -->
    <el-header>
      <h1>{{ title }}</h1>
    </el-header>

    <!-- 主体内容 -->
    <el-main>
      <!-- 数据库操作按钮 -->
      <el-button type="primary" @click="initializeDatabase">初始化数据库</el-button>
      <el-button type="danger" @click="closeDatabase">关闭数据库连接</el-button>

      <!-- 添加任务 -->
      <el-input v-model="taskInput" placeholder="输入任务名称" style="margin: 10px 0"></el-input>
      <el-button type="success" @click="addTask">添加任务</el-button>

      <!-- 其他任务操作 -->
      <el-button type="info" @click="loadTasks">加载任务列表</el-button>
      <el-button type="warning" @click="exportDatabase">导出数据库</el-button>
      <el-button type="primary" @click="importDatabase">导入数据库</el-button>
      <el-button type="danger" @click="clearTasks">清空任务</el-button>
      <el-button type="danger" @click="deleteDatabase">删除数据库</el-button>

      <!-- 任务列表 -->
      <el-table :data="tasks" style="width: 100%; margin-top: 20px" border>
        <el-table-column prop="name" label="任务名称" width="300"></el-table-column>
        <el-table-column prop="created" label="创建时间"></el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button type="danger" size="mini" @click="deleteTask(scope.row.id)"> 删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>

    <!-- 页脚 -->
    <el-footer>
      <p style="text-align: center">IndexedDB 任务管理系统</p>
    </el-footer>
  </el-container>
</template>

<script>
import IndexedDB from '@/libs/IndexedDB.js' // 引入 IndexedDB 工具类

export default {
  name: 'TaskManager',
  data() {
    return {
      title: 'IndexedDB + Vue 任务管理', // 页面标题
      taskInput: '', // 输入框绑定值
      tasks: [], // 任务列表
      dbInstance: null // IndexedDB 实例
    }
  },
  methods: {
    /**
     * 初始化数据库
     */
    async initializeDatabase() {
      try {
        this.dbInstance = new IndexedDB('TaskDatabase', 'Tasks')
        await this.dbInstance.initDB()
        this.$message.success('数据库初始化成功')
      } catch (error) {
        this.$message.error('数据库初始化失败')
        console.error(error)
      }
    },

    /**
     * 关闭数据库连接
     */
    closeDatabase() {
      if (this.dbInstance) {
        this.dbInstance.closeDB()
        this.$message.success('数据库连接已关闭')
      }
    },

    /**
     * 添加任务
     */
    async addTask() {
      if (!this.dbInstance) {
        this.$message.error('数据库未初始化')
        return
      }

      if (!this.taskInput.trim()) {
        this.$message.warning('请输入任务名称')
        return
      }

      const task = { name: this.taskInput, created: new Date().toISOString() }
      try {
        await this.dbInstance.addData(task)
        this.taskInput = ''
        this.$message.success('任务添加成功')
        this.loadTasks() // 刷新任务列表
      } catch (error) {
        this.$message.error('任务添加失败')
        console.error(error)
      }
    },

    /**
     * 加载任务列表
     */
    async loadTasks() {
      if (!this.dbInstance) {
        this.$message.error('数据库未初始化')
        return
      }

      try {
        this.tasks = await this.dbInstance.getAllData()
      } catch (error) {
        this.$message.error('加载任务列表失败')
        console.error(error)
      }
    },

    /**
     * 导出数据库内容到文件
     */
    async exportDatabase() {
      if (!this.dbInstance) {
        this.$message.error('数据库未初始化')
        return
      }

      try {
        const data = await this.dbInstance.getAllData()
        const blob = new Blob([JSON.stringify(data)], { type: 'application/json' })
        const url = URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.href = url
        a.download = 'TaskDatabase.json'
        a.click()
        URL.revokeObjectURL(url)
        this.$message.success('数据库导出成功')
      } catch (error) {
        this.$message.error('数据库导出失败')
        console.error(error)
      }
    },
    /**
     * 导入数据库内容
     */
    async importDatabase() {
      if (!this.dbInstance) {
        this.$message.info('检测到数据库未初始化，正在重新初始化...')
        try {
          // 重新初始化数据库
          this.dbInstance = new IndexedDB('TaskDatabase', 'Tasks')
          await this.dbInstance.initDB()
          this.$message.success('数据库重新初始化成功')
        } catch (error) {
          this.$message.error('数据库初始化失败，无法导入文件')
          console.error(error)
          return
        }
      }

      // 创建文件选择器
      const input = document.createElement('input')
      input.type = 'file'
      input.accept = 'application/json'

      input.onchange = async(event) => {
        const file = event.target.files[0]
        if (file) {
          const reader = new FileReader()
          reader.onload = async(e) => {
            try {
              // 解析 JSON 数据
              const data = JSON.parse(e.target.result)

              // 校验数据格式
              if (!Array.isArray(data)) {
                throw new Error('导入文件格式错误，请确保数据是数组格式')
              }

              // 写入数据到数据库
              const transaction = this.dbInstance.db.transaction(this.dbInstance.storeName, 'readwrite')
              const store = transaction.objectStore(this.dbInstance.storeName)

              data.forEach((item) => {
                if (!item.name || !item.created) {
                  console.warn('跳过无效任务数据：', item)
                  return
                }
                store.put(item) // 使用 `put` 方法避免 ID 冲突
              })

              transaction.oncomplete = () => {
                this.$message.success('数据库导入成功')
                this.loadTasks() // 刷新任务列表
              }

              transaction.onerror = (event) => {
                this.$message.error('数据库导入失败')
                console.error('数据库导入失败:', event)
              }
            } catch (error) {
              this.$message.error('文件解析失败，请确保导入的是正确的 JSON 文件')
              console.error('文件解析失败:', error)
            }
          }

          reader.readAsText(file) // 读取文件内容
        }
      }

      input.click() // 触发文件选择
    },

    /**
     * 清空任务列表
     */
    async clearTasks() {
      if (!this.dbInstance) {
        this.$message.error('数据库未初始化')
        return
      }

      try {
        await this.dbInstance.clearData()
        this.tasks = []
        this.$message.success('任务已清空')
      } catch (error) {
        this.$message.error('清空任务失败')
        console.error(error)
      }
    },

    /**
     * 删除数据库
     */
    async deleteDatabase() {
      try {
        await this.dbInstance.deleteDatabase()
        this.dbInstance = null
        this.tasks = []
        this.$message.success('数据库已删除')
      } catch (error) {
        this.$message.error('删除数据库失败')
        console.error(error)
      }
    },

    /**
     * 删除单个任务
     * @param {Number} taskId - 任务 ID
     */
    async deleteTask(taskId) {
      if (!this.dbInstance) {
        this.$message.error('数据库未初始化')
        return
      }

      try {
        await this.dbInstance.deleteData(taskId)
        this.$message.success('任务删除成功')
        this.loadTasks() // 刷新任务列表
      } catch (error) {
        this.$message.error('任务删除失败')
        console.error(error)
      }
    }
  }
}
</script>

<style scoped>
/* 自定义样式 */
el-main {
  padding: 20px;
}
</style>
